<template>
    
    <div class="mobile-layout">
        <Header :system-name="SYSTEM_NAME" :user-avatar="DEFAULT_USER_AVATAR" />
        <div class="mobile-page__content">
            <mweb_my v-show="layoutState.currentComponent == 'mweb_my'" ref="mweb_myRef"></mweb_my>
            <mweb_funcCenter v-show="layoutState.currentComponent == 'mweb_funcCenter'" ref="mweb_funcCenterRef">
            </mweb_funcCenter>

            <template v-for="menu in layoutState.footerMenu.filter((item) => !sysComponents.includes(item.FuncID))"
                :key="menu.FuncID">
                <mweb_render :ref="setComponentRef(menu.FuncID)"
                    v-show="layoutState.currentComponent == 'mweb_Render' && menu.FuncID == layoutState.currentpageComponentFid"
                    :fid="menu.FuncID"></mweb_render>
            </template>
        </div>
        <Footer :height="footerHeight" />
    </div>
</template>

<script setup>
import { onMounted, ref, watch, provide, onUnmounted, computed, watchEffect, nextTick, reactive, defineAsyncComponent } from 'vue'
import Header from '@/components/mobile/Header.vue'
import Footer from '@/components/mobile/Footer.vue'
import { getMobileNavbarConfigs } from '@/service/funcMenuService'
const mweb_my = defineAsyncComponent(() => import('@/components/mobile/MyPage.vue'))
const mweb_funcCenter = defineAsyncComponent(() => import('@/components/mobile/FuncCenterPage.vue'))
const mweb_render = defineAsyncComponent(() => import('@/components/mobile/Render.vue'))
import {
    SYSTEM_NAME,
    DEFAULT_USER_AVATAR,
} from '@/constants/layout.js'

import { getFooterHeight } from '@/service/commonService'
const footerHeight = ref(getFooterHeight())
const componentRefs = ref({})
const setComponentRef = (id) => (el) => {
    if (el) {
        componentRefs.value[id] = el
    }
}

const sysComponents = ["mweb_my", "mweb_funcCenter", "mweb_render", "mweb_search"]



const layoutState = reactive({
    currentFid: '',
    currentComponent: '',
    footerMenu: getMobileNavbarConfigs().filter(f => f.Position == "bottom"),
})

provide('mobileLayoutState', layoutState)

const setAppHeight = () => {
    const vh = window.innerHeight
    document.documentElement.style.setProperty('--screen-height', `${vh}px`)
}

onMounted(() => {
    setAppHeight()
    window.addEventListener('resize', setAppHeight)
    // 监听设备方向变化，重新计算高度
    window.addEventListener('orientationchange', setAppHeight)
})

onUnmounted(() => {
    // 移除事件监听，避免内存泄漏
    window.removeEventListener('resize', setAppHeight)
    window.removeEventListener('orientationchange', setAppHeight)
})
</script>

<style scoped lang="scss">
.mobile-layout {
    width: 100%;
    height: var(--screen-height, 100vh);
    min-height: var(--screen-height, 100vh);
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
}

.mobile-page__content {
    flex: 1;
    display: flex;

}
</style>